<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Server Monitor system</title>
		<link rel="stylesheet" type="text/css" href="{{ static_url("css/bootstrap.css") }}">
	</head>

	<body>
		<script src="{{ static_url("js/bootstrap.js") }}"></script>
		 <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
  
          </button>
          <a class="brand" href="/">Server Monitor system</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="/">首页</a></li>
              <li><a href="/all">全部服务器</a></li>
              <li><a href="/group">按业务分组</a></li>
              <li><a href="/admin">后台管理</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
    	<div class="row-fluid">
  		<div class="span4">...</div>
  		<div class="span8">...</div>
		</div>
		<table class="table table-striped">
			<tr><td></tr>
			<tr><td></tr>
		</table>
    <h3>服务器列表</h3>
     <table class="table table-striped table-bordered table-hover table-condensed">
      {% for server in servers%}
      <tr><td> <a href="/detail/{{ url_escape(server) }}">{{ server }}</a></tr>
       {% end %}
     </table>
     <h3>服务器性能</h3>
    <table class="table table-striped table-bordered table-hover table-condensed">
    {% for item in server_info%}
      {% for info in item %}
     <tr>
       <tr class="info"><td colspan="7"><a href="/detail/{{ url_escape(info['serverip']) }}">{{info['serverip']}}</a></tr>
      </tr>
      <tr>
        <th>基础信息<td>服务器IP<td>{{info['serverip']}}<td>时间<td>{{str(info['time'])[:-7]}}<td>用户数<td>{{info['loginusers']}}
      </tr>
      <tr>
        <th>进程及连接数<td>进程数<td>{{info['processnum']}}<td>TCP连接数<td>{{info['tcps']}}<td>UDP连接数<td>{{info['udps']}}
      </tr>
      <tr>
        <th>系统负载<td>1分钟<td>{{info['oneM']}}<td>5分钟<td>{{info['fiveM']}}<td>15分钟<td>{{info['fifteenM']}}
      </tr>
      <tr>
        <th>CPU使用率<td>已用<td>{{int(info['cpuused'])}}%<td>空闲<td>{{ info['cpuidle']}}%<td><div class="progress progress-warning"><div class="bar" style="width: {{int(info['cpuused'])}}%"></div></div><td><div class="progress progress-info"><div class="bar" style="width: {{ info['cpuidle']}}%"></div></div>
      </tr>
      <tr>
        <th>内存使用<td>总内存<td>{{int(info['memTotalReal']) / 1024}}M<td>已用内存<td>{{int(info['memUsedReal']) / 1024}}M<td>剩余内存<td>{{int(info['memAvailReal']) / 1024}}M
      </tr>
      <tr>
        <th>内存使用率<td>已用<td>{{float(info['memUsedReal']) / float(info['memTotalReal']) * 100 }}%<td>空闲<td>{{float(info['memAvailReal']) / float(info['memTotalReal']) * 100 }}%<td><div class="progress progress-warning"><div class="bar" style="width: {{float(info['memUsedReal']) / float(info['memTotalReal']) * 100 }}%"></div></div><td><div class="progress progress-info"><div class="bar" style="width: {{float(info['memAvailReal']) / float(info['memTotalReal']) * 100 }}%"></div></div>
      </tr>
      <tr>
        <th>SWAP使用<td>swap容量<td>{{int(info['memTotalSwap']) / 1024}}M<td>已用SWAP<td>{{int(info['memUsedSwap']) / 1024}}M<td>剩余SWAP<td>{{int(info['memAvailSwap']) / 1024}}M
      </tr>
      <tr>
        <th>硬盘容量<td>总空间<td>{{int(info['dskTotal']) / 1024 / 1024}}G<td>已用空间<td>{{int(info['dskUsed']) / 1024 / 1024}}G<td>剩余空间<td>剩余空间{{int(info['dskAvail']) / 1024 / 1024}}G
      </tr>
       <tr>
        <th>硬盘使用百分比<td>已使用<td>{{info['dskPercent']}}%<td>剩余空间<td>{{100 - int(info['dskPercent'])}}%<td><div class="progress progress-warning"><div class="bar" style="width: {{info['dskPercent']}}%"></div></div><td><div class="progress progress-info"><div class="bar" style="width: {{100 - int(info['dskPercent'])}}%"></div></div>
      </tr>
      <tr>
       <tr class="warning"><td colspan="7">&nbsp;</tr>
      </tr>
       {% end %}
   {% end %}
    </table>
    </div> 
    <!-- /container -->

	</body>
</html>